<template>
  <div>
    <div v-for="(item,index) in imgList"
         :key="index"
         class="imgList">
      <div v-if="item.percentage !== 100" class="box">
        <el-progress type="circle"
                     :percentage="Math.round(item.percentage)"
                     :width="30"
                     :stroke-width="2"/>
      </div>
      <div v-else class="item">
        <img :src="item.url + thumbnailParam" alt="">
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="onPreview(index)">
            <i class="el-icon-zoom-in"/></span>
          <!--          <span class="el-upload-list__item-delete">-->
          <!--            <i class="el-icon-download"></i></span>-->
          <span class="el-upload-list__item-delete">
            <i class="el-icon-delete" @click="onRemove(index)"/></span>
        </span>
      </div>

    </div>
    <el-upload list-type="picture-card"
               action=""
               :show-file-list="false"
               :auto-upload="false"
               :on-change="onFileUploadChange"
               :on-success="uploadSuccess">
      <i class="el-icon-plus"/>
    </el-upload>
    <custom-el-image-viewer v-if="imageViewerVisible"
                            :z-index="2000"
                            :preview-index="previewIndex"
                            :on-close="closeViewer"
                            :url-list="imgList.map(e=>e.url)"/>
  </div>
</template>

<script>
// import ImageViewer from 'element-ui/packages/image/src/image-viewer'
import CustomElImageViewer from '@/components/CustomElImageViewer'
import * as Qiniu from 'qiniu-js'
import apiServices from '@/service/api'

export default {
  name: 'CustomElUpload',
  components: {
    CustomElImageViewer
  },
  model: {
    prop: 'imgListModel',
    event: 'setValue'
  },
  props: {
    imgListModel: {
      type: Array,
      default: _ => []
    }
  },
  data() {
    return {
      thumbnailParam: '?imageView2/1/w/100/h/100',
      imgList: [],
      imageViewerVisible: false,
      previewIndex: 0
    }
  },
  watch: {
    imgList(val) {
      this.$emit('setValue', this.imgList.map(e => e.url))
    }
  },
  mounted() {
    this.imgList = this.imgListModel.map(e => {
      return {
        url: e,
        percentage: 100
      }
    })
  },
  methods: {
    onPreview(previewIndex) {
      this.previewIndex = previewIndex
      this.imageViewerVisible = true
    },
    onRemove(removeIndex) {
      this.imgList = this.imgList.filter((e, i) => {
        return i !== removeIndex
      })
    },
    closeViewer() {
      this.imageViewerVisible = false
    },
    onFileUploadChange(file, fileList) {
      const length = this.imgList.push({ percentage: 0 })
      // if (!this.uploadToken) {
      const putExtra = {
        fname: file.name
        // mimeType: ['image/png', 'image/jpeg', 'image/bmp', 'image/gif']
      }

      apiServices.getQiniuUploadToken()
        .then(res => {
          // console.log(res.data.data)
          // const options = {
          //   quality: 0.92,
          //   noCompressIfLarger: true,
          //   maxWidth: 1024,
          //   maxHeight: 768
          // }
          // Qiniu.compressImage(new Blob([file.raw]), options).then(data => {
          // 调用sdk上传接口获得相应的observable，控制上传和暂停
          Qiniu.upload(new Blob([file.raw]), null, res.data.data.token, putExtra, {})
            .subscribe(res => {
              this.imgList[length - 1].percentage = res.total.percent
              // Qiniu.upload(data.dist, null, res.data.data.token, putExtra, {}).subscribe(res => {
            }, err => {
              if (err) this.imgList.pop()
            }, complete => {
              const completeUrl = res.data.data.host + '/' + complete.key
              this.imgList[length - 1].url = completeUrl
              this.imgList = [...this.imgList]
              // this.imgSrc = res.data.data.host + '/' + complete.key + '?imageslim'
              // this.imgSrc = res.data.data.host + '/' + complete.key + '?imageView2/2/w/200'
            })
          // }).catch(err => {
          //   console.log(err)
          //   return err
          // })
        })
        .catch(_ => {
          this.imgList.pop()
        })
    },
    uploadSuccess(response, file, fileList) {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .imgList {
    width: 100px;
    height: 100px;
    border: 1px solid #c0ccda;
    border-radius: 6px;
    position: relative;
    float: left;
    margin: 0 8px 8px 0;
    overflow: hidden;

    .item {
      width: 100px;
      height: 100px;
      border-radius: 6px;
    }

    img {
      width: 100px;
      height: 100px;
      border-radius: 6px;
    }

    .box {
      position: absolute;
      left: 35px;
      top: 25px;
    }

    .el-upload-list__item-actions {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, .5);
      transition: opacity .3s;
    }

    .el-upload-list__item-actions:hover {
      opacity: 1;
    }

    .el-upload-list__item-actions span {
      display: none;
      cursor: pointer;
    }

    .el-upload-list__item-actions:hover span {
      display: inline-block;
    }

    .el-upload-list__item-actions .el-upload-list__item-delete {
      position: static;
      font-size: inherit;
      color: inherit;
    }

    .el-upload-list__item-actions span + span {
      margin-left: 15px;
    }

    .el-upload-list__item-actions:after {
      display: inline-block;
      content: "";
      height: 100%;
      vertical-align: middle;
    }

    /*/deep/ .el-progress-circle {*/
    /*  width: 30px !important;*/
    /*  height: 30px !important;*/
    /*}*/

    /deep/ .el-progress__text {
      top: 150%;
    }
  }
</style>
